{% extends 'commonTmp.html' %}
{% block main %}
    <!--====================================================================
        Start Banner Section
    =====================================================================-->
    <section class="banner-section" style="background-image:url({% static 'assets/img/banner.png' %} );">
        <div class="container">
            <div class="banner-inner text-center">
                <h2 class="page-title">商品详情</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{% url 'shop' 1 1%}">显示所有</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </section>
    <!--====================================================================
        End Banner Section
    =====================================================================-->


    <!--====================================================================
       Start Shop Details Page
   =====================================================================-->
    <section class="shop-details-page mt-120 rmt-70 mb-60 rmb-20">
        <div class="container">
            <div class="row col-gap-60">
                <div class="col-xl-12 col-lg-12">
                    <div class="product-details-wrap">

                        <div class="row col-gap-60">
                            <div class="col-xl-5">
                                　 <img src="{% static 'assets/img/goods/' %}{{goods_detail.goods_img}}" width="100%"/>
                            </div>
                            <div class="col-xl-7">
                                <div class="product-details text-left bg-white px-50 py-45 b1 br-5">
                                    <h3 class="mb-25 rmt-25">{{goods_detail.goods_name}}</h3>
                                    <div class="rating mb-25">
                                        <div class="star mr-15">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        </div>
                                        <div class="text">(性价比)</div>
                                    </div>
                                    <p > {{goods_detail.goods_desc}} </p>
                                    <h6 class="stock">库存: <span>充足</span></h6>
                                    <h4 class="price">单价：￥{{goods_detail.goods_price}}</h4>

                                    <div class="product-spinner mt-20">
                                        <a href="{% url 'cart_add' goods_detail.id 1 %}" class="theme-btn br-30 ml-25">添加购物车</a>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- product-details-tab/review -->

                        <!-- product-details-tab/review -->
                        <div class="product-details-review bg-white mt-60 px-50 pt-20 pb-30 b1 br-5">
                            <ul class="nav nav-tabs mb-20 mt-10">
                                <li><a href="#details" class="active" data-toggle="tab">商品介绍</a></li>
<!--                                <li><a href="#addi-info" data-toggle="tab" class="">相关信息</a></li>-->
                                <li><a href="#review" data-toggle="tab" class="">相关评论</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="details">

                                    <p>{{goods_detail.goods_desc}}</p>
                                </div>
                                <div class="tab-pane" id="addi-info">
                                    <p></p>
                                </div>
                                <div class="tab-pane" id="review">

                                    <!-- product-review-comments -->
                                    <div class="product-review-comments">
                                        <!-- singlepost-comments -->
                                        <div class="latest-comments">
                                            <div class="comments-box">
                                                <div class="comments-avatar">
                                                    <img src="{% static 'assets/img/shop/reviewer-1.png' %}" alt="">
                                                </div>
                                                <div class="comments-text">
                                                    <div class="avatar-name">
                                                        <h5>会飞的鱼</h5>
                                                        <span>3 Days Ago</span>
                                                        <div class="ratings">
                                                            <i class="flaticon-star"></i>
                                                            <i class="flaticon-star"></i>
                                                            <i class="flaticon-star"></i>
                                                            <i class="flaticon-star"></i>
                                                            <i class="flaticon-star"></i>
                                                        </div>
                                                    </div>
                                                    <p>东西质量非常好，很好吃的。与卖家描述的完全一致，非常病意,真的很喜欢，完全超出期望值，发货速度非常快，包装非常仔细、严实，物流公司服务态度很好，运送速度很快，很满意的一次购物。
                                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- Related Product -->
                        <div class="related-product mt-110 rmt-75">
                            <h3 class="mb-35">相关产品推荐</h3>
                            <div class="row">

                                <!--single Product -->
                                {% for rv in related_goods %}
                                <div class="col-xl-3 col-lg-4 col-md-6">
                                    <div class="latest-news-box mb-30">
                                        <div class="latest-news-img">
                                            <img src="{% static 'assets/img/goods/' %}{{rv.goods_img}}" alt="img"
                                                 style="height: 250px!important;">
                                        </div>
                                        <div class="latest-news-content">
                                            <div class="post-title br-5">
                                                <span class="date">{{rv.goods_name}}</span>
                                                <h5><a href="blog-details.html">{{rv.goods_tips}}</a></h5>
                                            </div>
                                            <p>{{rv.goods_desc}}</p>
                                            <div class="blog-meta">
                                                <a href="{% url 'shopDetails' rv.id rv.goods_cag_id %} "
                                                   class="theme-btn br-30 ml-20" style="color: #FFFFFF">加入购物车</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}

                            </div>
                        </div>

                        <div class="product-details-wrap">


                        </div>

                    </div>

                </div>

            </div>
        </div>
</div>
</section>


<!--====================================================================
   End Shop Details Page
=====================================================================-->
 {% endblock %}
